<template>
  <div class="flex flexColumn flex1 h100">
    <div class="title">
      <span>首页 &gt; 订单统计 </span>
    </div>
    <div class="main flex flexColumn">
      <div class="main-title">订单统计</div>
      <div class="flex orderstatistics-timer">
        <span>时间范围</span>
        <div>
          <el-date-picker
            v-model="date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <el-button type="goon" @click="reOrderData">查询</el-button>
      </div>
      <div style="height: 400px" ref="orderChart"></div>
    </div>
  </div>
</template>

<script>
import { ordertotal } from "@/apis/statistics.js";
import { getYYYYMMDDHHMMSS } from "@/utlis/utils.js";
import * as echarts from "echarts";

export default {
  data() {
    return {
      orderData: {},
      date: [new Date("2019/12/31 00:00:00"), new Date("2021/12/31 00:00:00")],
      datelist: [],
      orderlist: [],
    };
  },
  computed: {
    options() {
      let that = this;
      let option = {
        title: {
          text: "店铺数据",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["订单统计"],
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: that.datelist,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],

        series: [
          {
            name: "订单统计",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: that.orderlist,
          },
        ],
      };
      return option;
    },
  },
  created() {
    this.reOrderData();
  },
  methods: {
    reOrderData() {
      let date = [];
      date.push(
        getYYYYMMDDHHMMSS(this.date[0]),
        getYYYYMMDDHHMMSS(this.date[1])
      );
      date = JSON.stringify(date);
      console.log(date);
      ordertotal({ date: date }).then((res) => {
        console.log(res.data);
        if (res.data.data.length > 0) {
          this.datelist = res.data.data.map((v) =>
            getYYYYMMDDHHMMSS(v.orderTime)
          );
          this.orderlist = res.data.data.map((v) => v.orderAmount);
        }
      });
    },
    initEcharts() {
      let myChart = echarts.init(this.$refs.orderChart);
      myChart.setOption(this.options, true);
    },
  },
  mounted() {
    this.initEcharts();
  },
  watch: {
    options: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal);
          } else {
            this.myChart.setOption(oldVal);
          }
        } else {
          this.initEcharts();
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .orderstatistics-timer {
    span {
      line-height: 40px;
      font-size: 14px;
    }
    div {
      margin: 0 20px;
    }
  }
}
.el-button--goon {
  color: #fff;
  background-color: #706c61;
  border-color: #706c61;
}
</style>